<template>
  <div style="background-color: #f6f6f6">
    <el-row>
      <el-col :span="20" :offset="2">
        <div class="form" style="padding-left: 20px;">
          <el-form :inline="true" :model="search" class="dw-form-inline" size="medium">
            <el-form-item label="租户名">
              <el-input v-model="search.key" placeholder="请输入要查询的租户名" clearable></el-input>
            </el-form-item>
            <el-form-item style="margin-left: 20px;">
              <el-button type="primary" icon="el-icon-search" @click="queryChargeByKey(search.key)">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="table">
          <div class="table-title">
            <el-row :span="24" type="flex" justify="space-between" align="middle">
              <el-col :span="4"><h3>计费管理</h3></el-col>
              <el-col :span="20" style="text-align: right;">
                <el-button type="primary" size="medium" icon="el-icon-data-analysis" plain @click="handleAllDataAnalysis()">计费统计</el-button>
              </el-col>
            </el-row>
          </div>
          <el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe style="width: 100%"
                    border :default-sort="{prop: 'username', order: 'ascending'}" @sort-change="handleSortChange" :changeKey="changeKey">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column label="id" align="center" v-if="false"></el-table-column>
            <el-table-column label="序号" type="index" width="60" align="center">
              <template v-slot="scope">
                <span>{{(currentPage-1)*pageSize+1+scope.$index}}</span>
              </template>
            </el-table-column>
            <el-table-column label="租户名" prop="username" sortable align="center"></el-table-column>
            <el-table-column label="用户总数" prop="userNumber" sortable align="center"></el-table-column>
            <el-table-column label="发布问卷总数" prop="surveyNumber" sortable align="center"></el-table-column>
            <el-table-column label="已结费用" prop="costedFee" sortable align="center"></el-table-column>
            <el-table-column label="未结费用" prop="uncostedFee" sortable align="center"></el-table-column>
            <el-table-column label="操作" width="100" align="center">
              <template v-slot="scope">
                <el-tooltip content="计费统计" effect="dark" placement="top">
                  <el-button size="primary" icon="el-icon-data-analysis" circle @click="handleOneDataAnalysis(scope.row)"></el-button>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              :page-size="pageSize"
              :current-page="currentPage"
              :total="total"
              :page-sizes="[5,10,20,50]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
            >
            </el-pagination>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {queryChargeByKey} from "../../api/admin";
import {compare} from "../../utils/common";

export default {
  name: "chargeManagement",

  data(){
    return{
      changeKey:'false',
      search: {
        key: ''
      },
      tableData: [],
      pageSize: 5,
      currentPage: 1,
      total: 0
    }
  },

  methods: {
    queryChargeByKey(key){
      this.changeKey = !this.changeKey;
      queryChargeByKey(key).then((response)=>{
        this.tableData = response.data.data
        this.handleSortChange({prop: 'username', order: 'ascending'})
        this.total = response.data.data.length
      })
    },
    handleAllDataAnalysis(){
      window.sessionStorage.setItem("title", JSON.stringify('计费统计'))
      window.sessionStorage.setItem("target", JSON.stringify('全体租户'))
      this.$router.push({
        name: 'chargeDataAnalysis'
      })
    },

    handleOneDataAnalysis(row){
      window.sessionStorage.setItem("title", JSON.stringify('计费统计'))
      window.sessionStorage.setItem("target", JSON.stringify(row.username))
      this.$router.push({
        name: 'chargeDataAnalysis'
      })
    },

    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage
    },
    handleSizeChange (pageSize) {
      this.pageSize = pageSize
      this.currentPage = 1
    },
    handleSortChange({prop, order}){
      this.tableData.sort(compare(prop, order))
    }
  },
  created() {
    this.queryChargeByKey('')
  }
}
</script>

<style scoped>
.form{
  background-color: white;
  padding: 20px;
  margin-bottom: 20px;
}
.table{
  background: white;
  padding: 20px;
}
.table.table-title{
  padding-bottom: 20px;
  border-bottom: 1px solid #f3f3f3;
}
.dw-table.dw-table-title h3{
  padding: 0px;
  margin: 0px;
}
.el-form-item{
  margin-bottom: 0px;
}
.dw-dialog-form-item{
  margin-top: 20px;
}
.pagination{
  padding-top: 20px;
  text-align: right;
}
</style>
